<html>
<head>
<title>Chat Example</title>
<style type="text/css">
	#log {
	  	background: white;
	  	overflow: auto;
	}
</style>
<script src="/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
  $(function() {
	  var conn;
	  var msg = $("#msg");
	  var log = $("#log");
	  function appendLog(msg) {
	    var d = log[0]
	    var doScroll = d.scrollTop == d.scrollHeight - d.clientHeight;
	    msg.appendTo(log)
	    if (doScroll) {
	      d.scrollTop = d.scrollHeight - d.clientHeight;
	    }
	  }
	  $("#form").submit(function() {
	    if (!conn) {
	      return false;
	    }
	    if (!msg.val()) {
	      return false;
	    }
	    conn.send(msg.val());
	    msg.val("");
	    return false
	  });
	
	  if (window["WebSocket"]) {
	    conn = new WebSocket("ws://114.244.164.43:8999/ws");
	    conn.onclose = function(evt) {
	      appendLog($("<div><b>连接关闭.</b></div>"))
	    }
	    conn.onmessage = function(evt) {
	      appendLog($("<div/>").text(evt.data))
	    }
	  } else {
	    appendLog($("<div><b>浏览器不支持WebSocket.</b></div>"))
	  }
  });
</script>
</head>
	<body>
		<div id="log"></div>
		<form id="form">
			<input type="text" id="msg" size="64"/>
			<input type="submit" value="Send" />
		</form>
	</body>
</html>